import { onBeforeUnmount, onMounted, ref } from 'vue'

import { useIntersectionObserver, useIntervalFn } from '@vueuse/core'
import dayjs from 'dayjs'

export const useScroll = () => {
  const y = ref(0)
  const onScroll = () => {
    // 获取滚动条的滚动高度
    // console.log(document.documentElement.scrollTop)
    y.value = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
  }
  onMounted(() => {
    window.addEventListener('scroll', onScroll)
  })
  onBeforeUnmount(() => {
    // 组件销毁前 移出事件
    window.removeEventListener('scroll', onScroll)
  })
  return { y }
}

/**
 *
 * @param apiFn
 * @returns
 */

// 封装通用的数据懒加载api
export const useLazyData = (apiFn: () => void) => {
  // 通过 ref 获得组件实例
  const target = ref(null)
  const { stop } = useIntersectionObserver(
    // target 是观察的目标dom容器，必须是dom容器，而且是vue3.0方式绑定的dom对象
    target,
    // isIntersecting 是否进入可视区域，true是进入 false是移出
    // observerElement 被观察的dom
    ([{ isIntersecting }]) => {
      // 在此处可根据isIntersecting来判断，然后做业务
      if (isIntersecting) {
        stop()
        apiFn()
      }
    },
    // 模块进入可视区多少开始加载(0-1)
    { threshold: 0 }
  )
  return target
}
// 倒计时封装
// export const useCountdown = (endTime: number) => {}
export function useCountDown(count: number = 60) {
  const time = ref(0)
  const { pause, resume } = useIntervalFn(
    () => {
      time.value--
      if (!time.value) {
        pause()
      }
    },
    1000,
    { immediate: false }
  )

  // 组件销毁时清除定时器  => useIntervalFn 内部已经处理了  => 可以不写
  onBeforeUnmount(() => { pause() })

  const start = () => {
    time.value = count
    resume()
  }

  return {
    time,
    start
  }
}
// 处理时间
export const formatTime = (time: number) => {
  if (time <= 0) return '已超时'

  return dayjs.unix(time).format('mm分ss秒')
}